<template>
  <el-row style="padding-right: 20px;">
    <el-col :span="24">
      <!-- <change-password v-bind="$attrs" /> -->
      <el-form ref="ruleForm"
               :model="ruleForm"
               label-width="120px">
        <el-form-item label="账户">
          {{ value.userAccount }}@{{
          value.tenantAlias
        }}
        </el-form-item>
        <el-form-item label="密码"
                      prop="password"
                      style="margin-bottom: 18px"
                      :rules="[{ required: true, message: '密码不能为空' }]">
          <el-input v-model.trim="ruleForm.password"
                    minlength="6"
                    maxlength="20"
                    type="password"
                    show-password
                    @input="onInput(ruleForm.password)"
                    @blur="loseBlur"></el-input>
          <password-intensity :is-feeble="isFeeble"
                              :is-middle="isMiddle"
                              :is-strong="isStrong"></password-intensity>
          <span class="colour-password">{{passwordTips}}</span>
        </el-form-item>
        <el-form-item label="确认密码"
                      prop="confirmPassword"
                      :rules="[{ required: true, message: '密码不能为空' }]">
          <el-input v-model.trim="ruleForm.confirmPassword"
                    minlength="6"
                    maxlength="20"
                    type="password"
                    show-password
                    @input="newOnInput(ruleForm.confirmPassword)"
                    @blur="newLoseBlur">
          </el-input>
          <password-intensity :is-feeble="isNewFeeble"
                              :is-middle="isNewMiddle"
                              :is-strong="isNewStrong"></password-intensity>
          <span class="colour-password">{{affirmPasswordTips}}</span>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24">
      <div class="footer">
        <el-button type="default"
                   @click="handleCancel">取消</el-button>
        <el-button type="primary"
                   :loading="loading"
                   @click="handleSubmit('ruleForm')">{{
          loading ? "提交中 ..." : "确 定"
        }}</el-button>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import tenant from "@/api/modules/tenant"
import password from "@/libs/password";
import PasswordIntensity from "@/components/public/PasswordIntensity";

export default {
  name: "ResetUserPassword",
  components: { PasswordIntensity },
  mixins: [password],
  inheritAttrs: true,
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      ruleForm: { transportMode: 1 },
      disabled: false,
      loading: false
    }
  },
  beforeDestroy () {
    this.$once("hook:beforeDestroy", () => clearInterval(this.timer));
  },
  methods: {
    handleSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.password !== this.ruleForm.confirmPassword) {
            return this.$message({ message: "两次密码输入不一致", type: "warning" });
          }
          if (this.ruleForm.password.length < 6 || this.ruleForm.password.length > 20) {
            return this.$message({ message: "密码长度6-20位", type: "warning" });
          }
          if (this.isNewFeeble) {
            return this.$message({ message: "密码强度不够，至少要包含数字，字母，特殊字符三项中两项！", type: "warning" });
          }

          this.loading = true;
          this.timer = setTimeout(() => {
            setTimeout(() => {
              this.submitApi();
              this.loading = false;
            }, 400);
          }, 1500);
        } else {
          return false;
        }
      });
    },
    handleCancel () {
      this.$emit("cancel");
    },
    async submitApi () {
      let formParams = JSON.parse(JSON.stringify(this.ruleForm));
      formParams.password = this.$md5(formParams.password);
      formParams.confirmPassword = this.$md5(formParams.confirmPassword);
      await tenant.userEditPassword(this.value.userId, formParams);
      // this.$message[code === 0 ? "success" : "error"](message);
      this.$message.success('操作成功')
      this.$emit("confirm");
    }
  }
}
</script>

<style>
.colour-password {
  color: var(--prev-color-text-purered);
}
</style>